<#include "/common/defaultEngine.html"/>
<@pageTheme mark=true>
<@header title="主题选择" isPAS=false >
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html"/>
<![endif]-->
<link rel="stylesheet" href="${ctxStatic}/static/css/bootstrap.min.css">
<!-- animate 样式-->
<link rel="stylesheet" href="${ctxStatic}/static/css/animate.min.css">
<#-- Theme style -->
<link rel="stylesheet" href="${ctxStatic}/static/css/AdminLTE.min.css?V=${config.getDvVersion()}">
<link rel="stylesheet" href="${ctxStatic}/static/js/fast-ui.min.css?V=${config.getDvVersion()}"/>
<style type="text/css">
.list-unstyled{margin:10px;}
.full-opacity-hover{opacity:1;filter:alpha(opacity=1);border:1px solid #fff}
.full-opacity-hover:hover{border:1px solid #f00;}
.checkbox,.radio {margin-top: 0px;margin-bottom: 0px;}
</style>
</@header>
<body class="gray-bg">
</body>
<script src="${ctxStatic}/static/plugins/iCheck/icheck.min.js"></script>
<script>
    var baseURL = "${ctxStatic}/";
    var _lang = "${config.getSysLang()}";
    var _username = "<@shiro.principal property="username"/>";
    var LockScreen = ${config.getKey('SYS_LOCK_SCEREEN')};
</script>
<script type="text/javascript">

	function get(name,tag) {
		if (typeof (Storage) !== 'undefined') {
			if(typeof  tag !== 'undefined' && tag == 0){
				return window.localStorage.getItem(name);
			}else{
				return window.localStorage.getItem(_username+name);
			}
		} else {
			errrInfo('Please use a modern browser to properly view this template!')
		}
	}

	function store(name, val,tag) {
		if (typeof (Storage) !== 'undefined') {
			if(typeof  tag !== 'undefined' && tag == 0){
				window.localStorage.setItem(name, val)
			}else{
				window.localStorage.setItem(_username+name, val)
			}
		} else {
			errrInfo('Please use a modern browser to properly view this template!')
		}
	}

$(function () {
	var $skinsList = $('<ul />', {'class': 'list-unstyled clearfix'});
	/*Dark sidebar skins*/
	var $skinBlue =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-blue" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div>' +
							'<span style="display:block; width: 20%; float: left; height: 13px; background: #367fa9"></span>' +
							'<span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 13px;"></span>' +
							'</div>'
							+ '<div>' +
							'<span style="display:block; width: 20%; float: left; height: 25px; background: #222d32"></span>' +
							'<span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span>' +
							'</div>'
							+ '</a>'
							+ '<p class="text-center no-margin"><@ctx.i18n text = "蓝色"/></p>');
	$skinsList.append($skinBlue);
	var $skinBlack =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-black" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix">' +
							'<span style="display:block; width: 20%; float: left; height: 13px; background: #fefefe"></span>' +
							'<span style="display:block; width: 80%; float: left; height: 13px; background: #fefefe"></span>' +
							'</div>'
							+ '<div><span style="display:block; width: 20%; float: left; height: 25px; background: #222"></span>' +
							'<span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span>' +
							'</div>'
							+ '</a>'
							+ '<p class="text-center no-margin"><@ctx.i18n text = "白色"/></p>');
	$skinsList.append($skinBlack);
	var $skinPurple =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-purple" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div><span style="display:block; width: 20%; float: left; height: 13px;" class="bg-purple-active"></span>' +
							'<span class="bg-purple" style="display:block; width: 80%; float: left; height: 13px;"></span></div>'
							+ '<div><span style="display:block; width: 20%; float: left; height: 25px; background: #222d32"></span>' +
							'<span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span></div>'
							+ '</a>'
							+ '<p class="text-center no-margin"><@ctx.i18n text = "紫色"/></p>');
	$skinsList.append($skinPurple);
	var $skinGreen =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-green" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div><span style="display:block; width: 20%; float: left; height: 13px;" class="bg-green-active"></span>' +
							'<span class="bg-green" style="display:block; width: 80%; float: left; height: 13px;"></span></div>'
							+ '<div><span style="display:block; width: 20%; float: left; height: 25px; background: #222d32"></span>' +
							'<span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span></div>'
							+ '</a>'
							+ '<p class="text-center no-margin"><@ctx.i18n text = "绿色"/></p>');
	$skinsList.append($skinGreen);
	var $skinRed =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-red" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div><span style="display:block; width: 20%; float: left; height: 13px;" class="bg-red-active"></span>' +
							'<span class="bg-red" style="display:block; width: 80%; float: left; height: 13px;"></span></div>'
							+ '<div><span style="display:block; width: 20%; float: left; height: 25px; background: #222d32"></span>' +
							'<span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span></div>'
							+ '</a>'
							+ '<p class="text-center no-margin"><@ctx.i18n text = "红色"/></p>');
	$skinsList.append($skinRed);
	var $skinYellow =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-yellow" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div><span style="display:block; width: 20%; float: left; height: 13px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 13px;"></span></div>'
							+ '<div><span style="display:block; width: 20%; float: left; height: 25px; background: #222d32"></span><span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span></div>'
							+ '</a>'
							+ '<p class="text-center no-margin"><@ctx.i18n text = "黄色"/></p>');
	$skinsList.append($skinYellow);

	/*Light sidebar skins*/
	var $skinBlueLight =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-blue-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div><span style="display:block; width: 20%; float: left; height: 13px; background: #1681e5"></span><span style="display:block; width: 80%; float: left; height: 13px;background:#1890ff"></span></div>'
							+ '<div><span style="display:block; width: 20%; float: left; height: 25px; background: #f9fafc"></span><span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span></div>'
							+ '</a>'
							+ '<p class="text-center no-margin" ><@ctx.i18n text = "亮蓝色"/></p>');
	$skinsList.append($skinBlueLight);
	var $skinBlackLight =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-black-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 13px; background: #fefefe"></span><span style="display:block; width: 80%; float: left; height: 13px; background: #fefefe"></span></div>'
							+ '<div><span style="display:block; width: 20%; float: left; height: 25px; background: #f9fafc"></span><span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span></div>'
							+ '</a>'
							+ '<p class="text-center no-margin" ><@ctx.i18n text = "亮白色"/></p>');
	$skinsList.append($skinBlackLight);
	var $skinPurpleLight =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-purple-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div><span style="display:block; width: 20%; float: left; height: 13px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 13px;"></span></div>'
							+ '<div><span style="display:block; width: 20%; float: left; height: 25px; background: #f9fafc"></span><span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span></div>'
							+ '</a>'
							+ '<p class="text-center no-margin" ><@ctx.i18n text = "亮紫色"/></p>');
	$skinsList.append($skinPurpleLight);
	var $skinGreenLight =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-green-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div><span style="display:block; width: 20%; float: left; height: 13px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 13px;"></span></div>'
							+ '<div><span style="display:block; width: 20%; float: left; height: 25px; background: #f9fafc"></span><span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span></div>'
							+ '</a>'
							+ '<p class="text-center no-margin" ><@ctx.i18n text = "亮绿色"/></p>');
	$skinsList.append($skinGreenLight);
	var $skinRedLight =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-red-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div><span style="display:block; width: 20%; float: left; height: 13px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 13px;"></span></div>'
							+ '<div><span style="display:block; width: 20%; float: left; height: 25px; background: #f9fafc"></span><span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span></div>'
							+ '</a>'
							+ '<p class="text-center no-margin" ><@ctx.i18n text = "亮红色"/></p>');
	$skinsList.append($skinRedLight);
	var $skinYellowLight =
			$('<li />', {style: 'float:left; width: 33.33333%; padding: 5px;'})
					.append('<a href="javascript:void(0)" data-skin="skin-yellow-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">'
							+ '<div><span style="display:block; width: 20%; float: left; height: 13px;" class="bg-yellow-active"></span>' +
							'<span class="bg-yellow" style="display:block; width: 80%; float: left; height: 13px;"></span></div>'
							+ '<div><span style="display:block; width: 20%; float: left; height: 25px; background: #f9fafc"></span>' +
							'<span style="display:block; width: 80%; float: left; height: 25px; background: #f4f5f7"></span></div>'
							+ '</a>'
							+ '<p class="text-center no-margin" ><@ctx.i18n text = "亮黄色"/></p>');
	$skinsList.append($skinYellowLight);

    $skinsList.append('<li style="float:left; width: 33.33333%; padding: 5px;">' +
        '<span  class="checkbox check-box">' +
        '<label style="padding-left: 10px;"><input name="menu" type="checkbox" style="margin-right:20px"><@ctx.i18n text = "左侧菜单自动收缩"/></label>' +
        '</li>');

    $skinsList.append('<li style="float:left; width: 33.33333%; padding: 5px;">' +
        '<span  class="checkbox check-box">' +
        '<label style="padding-left: 10px;"><input name="tab" type="checkbox" style="margin-right:20px"><@ctx.i18n text = "Tab 记忆"/></label>' +
        '</li>');

    $skinsList.append('<li style="float:left; width: 33.33333%; padding: 5px;">' +
        '<span  class="checkbox check-box">' +
        '<label style="padding-left: 10px;"><input name="tabRef" type="checkbox" style="margin-right:20px"><@ctx.i18n text = "Tab 切换刷新"/></label>' +
        '</li>');
	$skinsList.append('<li style="float:left; width: 33.33333%; padding: 5px;">' +
			'<span  class="checkbox check-box">' +
			'<label style="padding-left: 10px;font-weight: bold;color:#000;"><input name="closefooter" type="checkbox" style="margin-right:20px;"><@ctx.i18n text = "是否关闭页脚"/></label>' +
			'</li>');
	$skinsList.append('<li style="float:left; width: 33.33333%; padding: 5px;">' +
			'<span  class="checkbox check-box">' +
			'<label style="padding-left: 10px;font-weight: bold;color:#000;"><input name="grayMode" type="checkbox" style="margin-right:20px;"><@ctx.i18n text = "灰色模式(新)"/></label>' +
			'</li>');
	$skinsList.append('<li style="float:left; width: 33.33333%; padding: 5px;">' +
			'<span  class="checkbox check-box">' +
			'<label style="padding-left: 10px;font-weight: bold;color:#000;"><input name="colorWeak" type="checkbox" style="margin-right:20px;"><@ctx.i18n text = "色弱模式(新)"/></label>' +
			'</li>');


	$(".gray-bg").html($skinsList);

	$('[data-skin]').on('click', function (e) {
		if ($(this).hasClass('knob'))
			return;
		e.preventDefault();
		parent.opt.changeSkin($(this).data('skin'));
		parent.opt.navDelTabNow();
	});

    var temp = get("pushMenu");

    var _tab = get("_Tab");

    var _tabRef = get("_tabRef");

	var mode = get("mode",0);

	var footer = get("_footer");

	if(temp){
        if(temp === "0"){
            $("input[name='menu']").iCheck('uncheck');
        }else{
            $("input[name='menu']").iCheck('check');
        }
    }

	if(_tab){
        if(_tab === "0"){
            $("input[name='tab']").iCheck('uncheck');
        }else{
            $("input[name='tab']").iCheck('check');
        }
    }

	if(_tabRef){
        if(_tabRef === "0"){
            $("input[name='tabRef']").iCheck('uncheck');
        }else{
            $("input[name='tabRef']").iCheck('check');
        }
    }

	if(typeof mode !== 'undefined' &&  mode && mode.length >0){
		if(mode !== "color-weak"){
			$("input[name='colorWeak']").iCheck('uncheck');
		}else{
			$("input[name='colorWeak']").iCheck('check');
		}

		if(mode !== "gray-mode"){
			$("input[name='grayMode']").iCheck('uncheck');
		}else{
			$("input[name='grayMode']").iCheck('check');
		}
	}

	if(typeof footer !== 'undefined' &&  footer && footer.length >0){
		if(footer == 1){
			$("input[name='closefooter']").iCheck('check');
		}else{
			$("input[name='closefooter']").iCheck('uncheck');
		}
	}

    /*iCheck单选框及复选框事件绑定*/
    if ($.fn.iCheck !== undefined) {
        $(".check-box:not(.noicheck),.radio-box:not(.noicheck)").each(function() {
            $(this).iCheck({
                checkboxClass: 'icheckbox-blue',
                radioClass: 'iradio-blue',
            })
        })
    }




    $('input').on('ifChanged', function(event){

        if($(this).attr("name") == "menu"){
            if($(this).is(':checked')){
                parent.opt.sidebarCollapse();
                store("pushMenu","1");
            }else{
                parent.opt.pushMenuInit();
                store("pushMenu","0");
            }
        }

        if($(this).attr("name") == "tab"){
            if($(this).is(':checked')){
                store("_Tab","1");
                parent.location.reload();
            }else{
                store("_Tab","0");
                parent.location.reload();
            }
        }

        if($(this).attr("name") == "tabRef"){
            if($(this).is(':checked')){
                store("_tabRef","1");
            }else{
                store("_tabRef","0");
            }
        }

		if($(this).attr("name") == "colorWeak"){
			if($(this).is(':checked')){
				parent.opt.setPageMode('color-weak');
				var md = get("mode",0);
				if(typeof md !== 'undefined' && md && md.length > 0){
					if(md == "gray-mode"){
						$("input[name='grayMode']").iCheck('uncheck');
					}
				}
				store("mode","color-weak",0);
			}else{
				var md = get("mode",0);
				if(typeof md !== 'undefined' && md && md.length > 0){
					if(md == "color-weak"){
						parent.opt.setPageMode("");
						store("mode","",0);
					}
				}
			}
		}

		if($(this).attr("name") == "grayMode"){
			if($(this).is(':checked')){
				parent.opt.setPageMode('gray-mode');
				var md = get("mode",0);
				if(typeof md !== 'undefined' && md && md.length > 0){
					if(md == "color-weak"){
						$("input[name='colorWeak']").iCheck('uncheck');
					}
				}
				store("mode","gray-mode",0);
			}else{
				var md = get("mode",0);
				if(typeof md !== 'undefined' && md && md.length > 0){
					if(md == "gray-mode"){
						parent.opt.setPageMode("");
						store("mode","",0);
					}
				}
			}
		}

		if($(this).attr("name") == "closefooter"){
			if($(this).is(':checked')){
				store("_footer","1");
				parent.jQuery('body').find('.main-footer').addClass("hidden");
			}else{
				store("_footer","0");
				parent.jQuery('body').find('.main-footer').removeClass("hidden");
			}
		}

    });


})
</script>
</html>
</@pageTheme>